<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Options</title>
    <link rel="stylesheet" href="styles/options.css" />
    <script type="module" src="scripts/options.js"></script>
  </head>
  <body>
    <main class="options">
      <h1 data-i18n="options">Options</h1>

      <section>
        <h2 data-i18n="appearance">Appearance</h2>
        <label>
          <span data-i18n="theme">Theme</span>
          <select id="optTheme">
            <option value="system" data-i18n="theme_system">System</option>
            <option value="light" data-i18n="theme_light">Light</option>
            <option value="dark" data-i18n="theme_dark">Dark</option>
          </select>
        </label>
        <label>
          <span data-i18n="accent_color">Accent Color</span>
          <input type="color" id="optAccent" value="#4f46e5" />
        </label>
      </section>

      <section>
        <h2 data-i18n="language">Language</h2>
        <select id="optLanguage"></select>
      </section>

      <section>
        <h2 data-i18n="privacy_security">Privacy & Security</h2>
        <label>
          <input type="checkbox" id="optEncrypt" />
          <span data-i18n="encrypt_sensitive"
            >Encrypt sensitive data (local)</span
          >
        </label>
      </section>

      <section>
        <h2 data-i18n="data">Data</h2>
        <button id="btnExport" data-i18n="export">Export</button>
        <button id="btnImport" data-i18n="import">Import</button>
        <input
          type="file"
          id="fileImport"
          accept="application/json"
          style="display: none"
        />
      </section>

      <footer>
        <button id="btnSave" data-i18n="save">Save</button>
        <span id="saveStatus"></span>
      </footer>
    </main>
  </body>
</html>
